<template>
  <view class="page-view page-image">
    <RcNavigation title="企服联聘" bgColor="transparent" />

    <view class="flex-1" style="overflow: hidden;">
      <scroll-view scrollY="true" style="height: 100%;">
        <view class="main-view">
          <image class="logo" src="@/static/images/public/logo.png" />
          <text class="label">欢迎来到企服联聘</text>

          <view class="form-card">
            <image class="icon" src="@/static/images/public/phone.png" />
            <text class="area-code">+86</text>
            <input v-model="formData.phone" class="input" type="text" placeholder="手机号" />
          </view>
          <view v-if="isPwdLogin" class="form-card">
            <image class="icon" src="@/static/images/public/lock.png" />
            <input v-model="formData.password" class="input" type="text" :password="isPassword" placeholder="请输入密码" />
            <image v-if="isPassword" class="icon" src="@/static/images/public/show.png" @click="switchPassword" />
            <image v-else class="icon" src="@/static/images/public/hide.png" @click="switchPassword" />
          </view>
          <view v-else class="form-card">
            <image class="icon" src="@/static/images/public/safety.png" />
            <input v-model="formData.code" class="input" type="text" placeholder="验证码" />
            <view class="send-button text-700-526" @click="sendCode(formData.phone, 1)">{{ codeText }}</view>
          </view>

          <view class="button" @click="submit">登录</view>

          <view class="link-view">
            <text @click="toRegisterPage">免费注册</text>
            <text @click="switchLoginType">{{ isPwdLogin ? '验证码登录' : '密码登录' }}</text>
          </view>

          <view class="pact-view" @click="selectPact">
            <view v-if="!formData.isCheck" class="check" />
            <view v-else class="check-el flex-c">
              <image class="w-20 h-14" src="@/static/images/user/select.png" />
            </view>
            <text>
              我已阅读<text class="pact" @click="toPactPage">
                《用户协议》
              </text>
            </text>
          </view>
        </view>

        <view class="wechat-button" @click="userLogin">
          <view class="icon-view flex-c">
            <image class="w-56 h-47" src="@/static/images/public/wechat.png" />
          </view>
          <text class="text">微信直接登录</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import type { UserData } from '@/types/api.d.ts'

import useCode from '@/hooks/use-code.ts'
import { useUserStore } from '@/stores/user.ts'

import RcNavigation from '@/components/navigation.vue'

const {
  codeText,
  sendCode,
  clearCodeTimer,
} = useCode()

interface RouteQuery {
  role: '0' | '1';
}

// 当前角色
let role = '0'

const userStore = useUserStore()

const isPwdLogin = ref(true)

const isDisabled = ref(false)
const isPassword = ref(true)

const formData = reactive({
  phone: '',
  code: '',
  password: '',
  isCheck: false,
})

onLoad((option) => {
  initParams(option as RouteQuery)
})

onUnload(() => {
  clearCodeTimer()
})

// 传参初始化
const initParams = (option: RouteQuery) => {
  role = option.role || '0'
}

const switchPassword = () => {
  isPassword.value = !isPassword.value
}

const switchLoginType = () => {
  isPwdLogin.value = !isPwdLogin.value
}

const selectPact = () => {
  formData.isCheck = !formData.isCheck
}

const formVerify = () => {
  if (isDisabled.value) return true

  if (formData.phone === '') {
    uni.$u.toast('请输入手机号')
    return true
  }

  if (formData.password === '' && isPwdLogin.value) {
    uni.$u.toast('请输入密码')
    return true
  }

  if (formData.code === '' && !isPwdLogin.value) {
    uni.$u.toast('请输入验证码')
    return true
  }

  if (!formData.isCheck) {
    uni.$u.toast('请勾选用户协议')
    return true
  }

  return false
}

const submit = async () => {
  if (formVerify()) return

  isDisabled.value = true
  uni.showLoading({ title: '加载中...', mask: true })

  const url = isPwdLogin.value ? '/user/login' : '/user/mobilelogin'

  let data = {}

  if (isPwdLogin.value) {
    data = {
      account: formData.phone,
      password: formData.password,
    }
  } else {
    data = {
      mobile: formData.phone,
      captcha: formData.code,
    }
  }

  const res = await uni.$u.post<UserData>(url, data)

  if (res.code === 1) {
    userStore.setUserInfo(res.data)
    uni.setStorageSync('token', res.data.userinfo.token)

    uni.hideLoading()
    uni.switchTab({ url: '/pages/tab-page/tab-1/tab-1' })
  } else {
    uni.$u.toast(res.msg)
  }

  isDisabled.value = false
}

const toPactPage = () => {
  uni.navigateTo({ url: '/pages/user/pact/pact' })
}

const toRegisterPage = () => {
  let url = ''

  if (role === '0') {
    url = '/pages/user/register/register'
  } else {
    url = '/pages/user/indus-tag/indus-tag'
  }

  uni.navigateTo({ url })
}
function userLogin() {
  uni.getUserProfile({
    desc: 'Wexin', // 必填，声明获取用户个人信息后的用途
    success: (res) => {
      console.log("🚀 ~ getUserInfo ~ res:", res)
    },
    fail: (err) => {
      console.log('用户信息获取失败', err);
    }
  });
  // uni.login({
  //   provider: 'weixin',
  //   success: async (e) => {

  //   },
  //   fail: (err) => {
  //     console.log('登录失败', err);
  //   }
  // });
}


</script>

<style lang="scss">
page {
  background-color: $page-color-2;
}
</style>

<style lang="scss" scoped>
.page-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.main-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 900rpx;
  margin: 0 30rpx;
  padding: 0 58rpx;
  margin-top: 180rpx;
  border-radius: 32rpx;
  background-color: #fff;

  .logo {
    margin-top: 45rpx;
    margin-bottom: 28rpx;
    width: 171rpx;
    height: 156rpx;
  }

  .label {
    margin-bottom: 48rpx;
    color: #333333;
    font-size: 36rpx;
    font-weight: bold;
  }

  .button {
    width: 100%;
    height: 90rpx;
    margin-top: 16rpx;
    color: #FFFFFF;
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    line-height: 90rpx;
    background: #1269FF;
    border-radius: 10rpx;
    box-shadow: 0rpx 3rpx 39rpx 1rpx rgba(31, 119, 245, 0.27);
  }
}

.form-card {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100rpx;
  margin-bottom: 30rpx;
  padding: 0 24rpx;
  background: #F4F8FB;
  border-radius: 10rpx;

  .icon {
    width: 40rpx;
    height: 40rpx;
  }

  .input {
    flex: 1;
    padding: 0 24rpx;
    font-size: 32rpx;
  }

  .area-code {
    margin-left: 24rpx;
    color: #333333;
    font-size: 32rpx;
    font-weight: 400;
  }

  .send-button {
    width: 180rpx;
    padding-left: 20rpx;
    text-align: center;
    border-left: 1rpx solid $border-color-1;
  }
}

.link-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 37rpx;
  margin-bottom: 67rpx;
  color: #9C9C9C;
  font-weight: 400;
  font-size: 30rpx;
}

.pact-view {
  display: flex;
  align-items: center;
  color: #9C9C9C;
  font-size: 30rpx;
  font-weight: 400;

  .check {
    width: 26rpx;
    height: 26rpx;
    margin-right: 8rpx;
    border-radius: 50%;
    border: 2rpx solid #9C9C9C;
  }

  .check-el {
    width: 26rpx;
    height: 26rpx;
    margin-right: 8rpx;
    border-radius: 50%;
    background-color: $bg-color-2;
  }

  .pact {
    color: #1269FF;
  }
}

.wechat-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 180rpx;

  .icon-view {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    border: 1rpx solid $border-color-5;
  }

  .text {
    padding: 20rpx 0;
    color: #999999;
    font-size: 24rpx;
    font-weight: 500;
  }
}
</style>
